<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>proxy</title>
</head>
<body>
    <script>
        const p = {
            name: "张三",
            age: 18
        }
        /**
         * 属性读取拦截函数
         * @param {Object} target - 被代理的目标对象
         * @param {string|Symbol} key - 被访问的属性名
         * @returns {*} 目标对象的属性值
         */
        let vm = new Proxy(p,{
            get(target,key){
                // 使用 Reflect API 获取原始值
              const res = Reflect.get(target,key)
              console.log("get",key,res)
              return res 
            },
            set(target,key,value){
                // 记录旧值用于变更检测
              const oldVal = target[key]
              const res = Reflect.set(target,key,value)
              if(oldVal !== value){
                console.log("值发生了变化")
              }
              console.log("set",key,value)
              return res      
            }
        })

        

    </script>
</body>
</html>